<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="5">
        <left-tree
          :fieldname="isShow"
          :treelist="treeList"
          :search_data.sync="boxNum"
          @refesh_list="sendBoxOrderlist"
          ref="leftTree"
        ></left-tree>
      </el-col>
      <el-col :span="19">
        <el-card shadow="never" class="card" style="overflow: auto">
          <el-table
            :data="tableData"
            style="width: 100%; margin-top: 21px"
            :header-cell-style="{
              background: '#f5f7fa',
              color: '#14142B',
              height: '28px',
              padding: '5px 0',
            }"
            :cell-style="{
              color: '#606266',
              fontSize: '13px',
              padding: '7px 0',
            }"
            border
          >
            <template slot="empty">
              <img
                class="empty-img"
                src="@/assets/imgs/zanwushuju.svg"
                style="width: 64px; height: 50px"
                alt=""
              />
              <div class="noCart">暂无数据</div>
            </template>
            <el-table-column
              type="index"
              label="序号"
              align="center"
              width="100px"
            ></el-table-column>
            <el-table-column
              prop="orderDeliver.invoice_No"
              label="运单号"
              align="center"
            ></el-table-column>
            <el-table-column prop="channelTitle" align="center" label="渠道">
            </el-table-column>
            <el-table-column
              prop="create_time"
              label="创建时间"
              align="center"
            ></el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import LeftTree from "@/components/libs/LeftTree.vue";
import {
  delBoxNoCache,
  delBoxNoOrderCache,
  getBoxNoCacheList,
  sendBoxOrderlist,
  scanCode,
  getSendBoxlist,
} from "@/api/Box";

export default {
  name: "shipped",
  components: { LeftTree },
  data() {
    return {
      input: "",
      isShow: false,
      form: {},
      tableData: [],
      treeList: [],
      active: "",
      boxNum: "",
    };
  },
  mounted() {
    this.getSendBoxlist();
  },
  methods: {
    scan() {
      if (!this.boxNum) return this.$message.warning("请先选择箱单");
      if (this.input) {
        this.scanCode({ boxNum: this.boxNum, scanNo: this.input });
        this.input = "";
      } else {
        this.$message.warning("请输入单号");
      }
      this.$refs.order.focus();
    },
    blurInput() {
      // this.$refs.order.focus();
    },
    //获取箱单列表
    async getSendBoxlist() {
      const res = await getSendBoxlist();
      if (res.data.status === 200) {
        this.treeList = res.data.data;
        this.sendBoxOrderlist();
      }
    },
    //刷新运单列表
    async sendBoxOrderlist(val) {
      if (this.boxNum) {
        const res = await sendBoxOrderlist({ pack_id: val });
        console.log(res);
        if (res.data.status === 200) {
          this.tableData = res.data.data.data;
        }
      }
    },
    //下载箱单
    downLoad() {},
    //扫描箱单
    async scanCode(obj) {
      const res = await scanCode(obj);
      console.log(res);
      if (res.data.status === 200) {
        this.$message({
          type: "success",
          message: res.data.msg,
        });
        this.sendBoxOrderlist();
      } else {
        this.$message({
          type: "error",
          message: res.data.msg,
        });
      }
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep .el-input__inner {
  height: 32px;
  line-height: 32px;
}

.el-card {
  min-height: 800px;
}

.tabLeft > .el-tabs__nav-wrap::after {
  height: 0;
}

/*tabs 去掉el-tab-pane切换时的蓝色下划线*/
.tabLeft > .el-tabs__active-bar {
  background-color: transparent !important;
}
</style>
